<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>光晕效果</title>
	<style>
		body {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100vh;
			margin: 0;
			background-color: #f0f0f0;
		}

		.glow {
			width: 300px;
			height: 300px;
			border-radius: 50%;
			overflow: hidden;
			background: radial-gradient(circle at center, rgba(0, 0, 255, 0.8) 0%, rgba(0, 0, 255, 0) 70%);
			filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)) drop-shadow(0 0 20px rgba(255, 255, 255, 0.8)) drop-shadow(0 0 30px rgba(255, 255, 255, 0.8));
		}
	</style>
</head>
<body>
	<div class="glow"></div>
</body>
</html>